<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <title>孕产妇健康管理平台</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
</head>

<body class="vertical-layout vertical-menu 2-columns   menu-expanded fixed-navbar" data-open="click"
  data-menu="vertical-menu" data-color="bg-gradient-x-purple-blue" data-col="2-columns">
  <nav
    class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-semi-light">
    <div class="navbar-wrapper">
      <div class="navbar-container content">
        <div class="collapse navbar-collapse show" id="navbar-mobile">
          <ul class="nav navbar-nav mr-auto float-left">
            <li class="nav-item mobile-menu d-md-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs"
                href="javascript:;"><i class="ft-menu font-large-1"></i></a></li>
            <li class="nav-item d-none d-md-block"><a class="nav-link nav-menu-main menu-toggle hidden-xs"
                href="javascript:;"><i class="ft-menu"></i></a></li>
            <li class="nav-item dropdown navbar-search"><a class="nav-link dropdown-toggle hide" data-toggle="dropdown"
                href="javascript:;"><i class="ficon ft-search"></i></a>
              <ul class="dropdown-menu">
                <li class="arrow_box">
                  <form>
                    <div class="input-group search-box">
                      <div class="position-relative has-icon-right full-width">
                        <input class="form-control" id="search" type="text" placeholder="Search here...">
                        <div class="form-control-position navbar-search-close"><i class="ft-x"></i></div>
                      </div>
                    </div>
                  </form>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav float-right">
            <li class="dropdown dropdown-user nav-item"> <a class=" nav-link dropdown-user-link" href="login.html">
                <span class="username"><i class="ft-power"></i>退出登录</span> </a> </li>
            <li class="dropdown dropdown-user nav-item"> <a class="dropdown-toggle nav-link dropdown-user-link"
                href="javascript:;"> <span class="username">Admin</span> <span class="avatar avatar-online"><img
                    src="app-assets/images/avatar-s-19.png" alt="avatar"></span> </a> </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div class="main-menu menu-fixed menu-light menu-accordion    menu-shadow " data-scroll-to-active="true"
    data-img="app-assets/images/backgrounds/02.jpg">
    <div class="navbar-header">
      <ul class="nav navbar-nav flex-row">
        <li class="nav-item mr-auto"><a class="navbar-brand" href="index.html"><img class="brand-logo"
              alt="Chameleon admin logo" src="app-assets/images/logo.png" />
            <h3 class="brand-text">孕产妇健康管理平台</h3>
          </a></li>
        <li class="nav-item d-md-none"><a class="nav-link close-navbar"><i class="ft-x"></i></a></li>
      </ul>
    </div>
    <div class="main-menu-content">
      <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
        <li class=" nav-item"><a href="index.html"><i class="ft-home"></i><span class="menu-title">首页</span></a></li>
        <li class=" nav-item "><a href="javascript:;"><i class="ft-layers"></i><span class="menu-title"> 系统设置</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="基本设置.html">基本设置</a> </li>
            <li><a class="menu-item" href="管理员管理.html">管理员管理</a> </li>
            <li><a class="menu-item" href="用户参数管理.html">用户参数管理</a> </li>
          </ul>
        </li>
        <li class=" nav-item open"><a href="javascript:;"><i class="ft-users"></i><span class="menu-title">
              用户管理</span></a>
          <ul class="menu-content">
            <li class="active"><a class="menu-item" href="用户管理.html">用户管理</a> </li>
            <li><a class="menu-item" href="团体用户管理.html">团体用户管理</a></li>
            <li><a class="menu-item" href="添加用户.html">添加用户</a></li>
            <li><a class="menu-item" href="团体管理.html">团体管理</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-layout"></i><span class="menu-title"> 评测管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="评测预约.html">评测预约</a></li>
            <li><a class="menu-item" href="答题记录.html">答题记录</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-feather"></i><span class="menu-title"> 量表管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="量表管理.html">量表管理</a></li>
            <li><a class="menu-item" href="量表类别管理.html">量表类别管理</a></li>
            <li><a class="menu-item" href="套餐管理.html">套餐管理</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-edit"></i><span class="menu-title"> 医师管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="医师管理.html">医师管理</a> </li>
            <li><a class="menu-item" href="添加医师.html">添加医师</a> </li>
            <li><a class="menu-item" href="科室管理.html">科室管理</a> </li>
            <li><a class="menu-item" href="医师预约管理.html">医师预约管理</a> </li>
            <li><a class="menu-item" href="班次管理.html">班次管理</a> </li>
            <li><a class="menu-item" href="工作时间管理.html">工作时间管理</a> </li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-shield"></i><span class="menu-title"> 预警管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="用户预警.html">用户预警</a></li>
            <li><a class="menu-item" href="题库预警.html">题库预警</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-file-text"></i><span class="menu-title">
              报告管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="报告管理.html">报告管理</a></li>
            <li><a class="menu-item" href="报告审核.html">报告审核</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-trending-up"></i><span class="menu-title">
              数据分析</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="量表分析.html">量表分析</a></li>
            <li><a class="menu-item" href="人群分析.html">人群分析</a></li>
            <li><a class="menu-item" href="阳性分析.html">阳性分析</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-bar-chart-2"></i><span class="menu-title">
              临床数据</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="临床数据管理.html">临床数据管理</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-sidebar"></i><span class="menu-title"> 训练管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="心理训练管理.html">心理训练管理</a></li>
            <li><a class="menu-item" href="添加心理训练.html">添加心理训练</a></li>
            <li><a class="menu-item" href="训练类别管理.html">训练类别管理</a></li>
            <li><a class="menu-item" href="训练类型管理.html">训练类型管理</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="navigation-background"></div>
  </div>
  <div class="app-content content">
    <div class="content-wrapper" id="app">
      <div class="content-wrapper-before"></div>
      <div class="content-header row">
        <div class="content-header-left col-md-4 col-12 mb-2">
          <h3 class="content-header-title">用户管理</h3>
        </div>
        <div class="content-header-right col-md-8 col-12">
          <div class="breadcrumbs-top float-md-right">
            <div class="breadcrumb-wrapper mr-1">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                <li class="breadcrumb-item"><a href="javascript:;"> 用户管理</a></li>
                <li class="breadcrumb-item active">用户管理</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
      <div class="content-body">
        <section class="file-browser">
          <div class="row match-height">
            <div class="col-lg-12 col-md-12">
              <div class="card">
                <div class="card-header">
                  <label class="card-title" for="exampleInputFile">用户管理</label>
                </div>
                <div class="card-block">
                  <div class="card-body">
                    <div class="topbtn" >

                      <!-- <a href="添加用户.html" class="btn btn-bg-gradient-x-purple-red">创建用户账号</a> -->
                      <button @click="addUser()" class="btn btn-bg-gradient-x-purple-red">创建用户账号</button><br><br>
                      <!--  <a href="javascript:;" class="btn btn-info upbtn"><input type="file">批量导入用户账号</a>
                      <a href="javascript:;" class="btn btn-info ">导出用户数据</a>
                      <a href="javascript:;" class="btn btn-def ">下载模版</a> -->
                      <input v-model="Obj.number" placeholder="手机号" style="width:10%">
                      <input v-model="Obj.day" placeholder="第几周" style="width:10%">
                      <input v-model="Obj.name" placeholder="姓名" style="width:10%">
                      <input v-model="Obj.age" placeholder="年龄" style="width:10%">
                      <input v-model="Obj.case" placeholder="病历号" style="width:10%">
                      <!-- <input v-model="newObj.content" placeholder="筛查类型" style="width:10%">
                      <input v-model="newObj.title" placeholder="用户类型" style="width:10%">
                     -->
                      <input v-model="Obj.department" placeholder="科室" style="width:10%">
                      <input v-model="Obj.Dname" placeholder="医师" style="width:10%">
                      <input v-model="Obj.adders" placeholder="地址" style="width:10%">
                      <input v-model="Obj.date" placeholder="时间" style="width:10%"><br><br><br>
                      <button @click="saveNew()" class="btn btn-bg-gradient-x-purple-red">保存</button><span></span>
                      <button @click="closeWindow()" class="btn btn-bg-gradient-x-purple-red">关闭</button>
                    </div>
                    <div class="selbox">
                      <div class="form1">
                        <ul class="row">
                          <!-- <li class="col-xs-4">
                            <span>手机号码：</span>
                            <input type="text" class="form-control">
                          </li> -->
                          <li class="col-xs-4">
                            <span>姓名：</span>
                            <input type="text" class="form-control" v-model="keyWords">
                          </li>
                          <li class="col-xs-4" style="padding-left: 10px">
                            <a href="javascript:;" class="btn btn-primary" v-model="toSearchUser()">查询</a>
                            <a href="javascript:;" class="btn btn-default" v-model="reSetSearchUser()">重置</a>
                            <!-- <a class="btn" role="button" data-toggle="collapse" href="#collapseExample"
                              aria-expanded="false" aria-controls="collapseExample">更多查询条件</a> -->
                          </li>
                        </ul>
                      </div>

                      <div class="collapse in" id="collapseExample" aria-expanded="true">
                        <div class="form1">
                          <ul class="row">
                            <li class="col-xs-4">
                              <span>筛查类型：</span>
                              <select class="form-control">
                                <option>请选择</option>
                              </select>
                            </li>
                            <li class="col-xs-4">
                              <span>用户类型：</span>
                              <select class="form-control">
                                <option>请选择</option>
                              </select>
                            </li>
                            <li class="col-xs-4">
                              <span>科室：</span>
                              <select class="form-control">
                                <option>请选择</option>
                              </select>
                            </li>
                            <li class="col-xs-4">
                              <span> 医师：</span>
                              <select class="form-control">
                                <option>请选择</option>
                              </select>
                            </li>
                            <li class="col-xs-4">
                              <span>孕周：</span>
                              <div class="clearfix">
                                <div class="pull-left"><input type="text" class="form-control"
                                    style="min-width: inherit; width: 50px;"></div>
                                <div class="pull-left" style="line-height: 36px;">-</div>
                                <div class="pull-left"><input type="text" class="form-control"
                                    style="min-width: inherit; width: 50px;"></div>
                              </div>
                            </li>

                            <li class="col-xs-4">
                              <span>年龄：</span>
                              <div class="clearfix">
                                <div class="pull-left"><input type="text" class="form-control"
                                    style="min-width: inherit; width: 50px;"></div>
                                <div class="pull-left" style="line-height: 36px;">-</div>
                                <div class="pull-left"><input type="text" class="form-control"
                                    style="min-width: inherit; width: 50px;"></div>
                              </div>
                            </li>
                            <li class="col-xs-4">
                              <span>创建时间：</span>
                              <input type="text" class="form-control " id="date" style="min-width:230px;"
                                placeholder="请选择起止时间">
                            </li>



                          </ul>
                        </div>
                      </div>

                    </div>
                    <div class="tablebox">
                      <table class="table ">
                        <thead>
                          <tr>
                            <th>ID号</th>
                            <th>手机号</th>
                            <th>第几周</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>病历号</th>
                            <!--  <th>筛查类型</th>
                            <th>用户类型</th> -->
                            <th>科室</th>
                            <th>医师</th>
                            <th>地址</th>
                            <th>创建时间</th>
                            <!-- 
                            <th>状态</th> -->
                            <th width="100">操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item,index) in searchUser" :key="item.id">

                            <!-- <td>{{item.id}}</td>
                            <td :title="item.content">
                              {{item.title}}
                            </td> -->
                            <td>{{item.id}}</td>
                            <td>{{item.number}}</td>
                            <td>{{item.day}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.age}}</td>
                            <td>{{item.case}}</td>
                            <td>{{item.department}}</td>
                            <td>{{item.Dname}}</td>
                            <td>{{item.adders}}</td>
                            <td>{{item.date}}</td>
                            <td><a href="#" @click.prevent="update(item.id)">修改</a> |
                              <a href="#" @click.prevent="delNew(item.id)">删除</a>
                            </td>
                          </tr>



                        </tbody>
                      </table>
                    </div>
                    <div class="">
                      <!-- <a href="javascript:;" class="btn btn-success">审核</a>
                      <a href="javascript:;" class="btn btn-warning">拒绝</a> -->
                      <a href="javascript:;" class="btn btn-danger">删除</a>
                    </div>
                    <nav aria-label="Page navigation" class="page">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="javascript:;" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                          </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
                        <li class="page-item active"><a class="page-link" href="javascript:;">3</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">4</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">5</a></li>
                        <li class="page-item">
                          <a class="page-link" href="javascript:;" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                          </a>
                        </li>
                      </ul>
                    </nav>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <footer class="footer footer-static footer-light navbar-border navbar-shadow">
    <div class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
        class="float-md-left d-block d-md-inline-block">2018 &copy; Copyright 孕产妇健康管理平台 © 2018-2020</span>
      <ul class="list-inline float-md-right d-block d-md-inline-blockd-none d-lg-block mb-0">
        <li class="list-inline-item">孕产妇健康管理平台</li>
      </ul>
    </div>
  </footer>


  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加修改用户</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form form-horizontal">
            <div class="form-body">
              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput1">手机号码</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput2">密码</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput3">所属医师</label>
                <div class="col-md-9">
                  <select class="form-control">
                    <option>胡松鹤</option>
                  </select>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control">姓名</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput5">性别</label>
                <div class="col-md-9">
                  <select class="form-control">
                    <option>男</option>
                  </select>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control">病历号<span class="text-danger">*</span></label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-3 label-control">年龄</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

            </div>


          </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-def" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-danger">执行操作</button>
        </div>
      </div>
    </div>
  </div>


  <!-- BEGIN VENDOR JS-->
  <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/laydate/laydate.js" type="text/javascript"></script>

  <script>
    lay('#version').html('-v' + laydate.v);
    laydate.render({
      elem: '#date'
      , range: true
      , theme: '#6967ce'
    });
  </script>
  <script>
  </script>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const { ref,reactive  } = Vue
  const app = Vue.createApp({
    setup(props) {
      const isShow = ref(false);
      let maxId = ref(0);
      let keyWords = ref('');
      let searchUser = ref({})
      let Obj = ref({
        id: 0,
        number: '',
        day: '',
        name: '',
        age: '',
        case: '',
        department: '',
        Dname: '',
        date: '',
        adders: '',
      });
      let newObj = ref([{
        id: 1,
        number: 123456789,
        day: "第一周",
        name: '威震天',
        age: 29,
        case: 13097880,
        department: '儿科',
        Dname: '白雪芹',
        date: "2020-09-15",
        adders: '广州市天河区',
        date: "2020-09-15",

      },
      {
        id: 2,
        number: 123456789,
        day: "第一周",
        name: '威震天',
        age: 29,
        case: 13097880,
        department: '儿科',
        Dname: '白芹',
        date: "2020-09-15",
        adders: '广州市天河区',
        date: "2020-09-15",

      }])
      //打开新增窗口
      function addUser() {
        isShow.value = true;
      }

      //关闭新增窗口
      function closeWindow() {
        this.isShow = false;
      }
      //增加用户
      function saveNew() {  // 添加  or  修改
        const id = Obj.value.id;
        if (id > 0) {
          let editUser = newObj.value.filter(function (item) {
            return id == item.id
          })
          //原始数据对象： editUser
          if (editUser.length == 1) {
            Object.assign(editUser[0], Obj.value);
          } else {
            alert('更新失败，未找到原始记录！');
            return false;
          }
        } else {
          Obj.value.id = maxId.value++;
          newObj.value.push(Obj.value);
        }
        Obj.value = {
          id: 0,
          number: '',
          day: '',
          name: '',
          age: '',
          case: '',
          department: '',
          Dname: '',
          date: '',
          adders: ''
        }
        toSearchUser();
        closeWindow();

      };

      //删除数据
      function delNew(id) {
        alert('确认删除此数据吗？')
        var index = newObj.value.findIndex(item => {
          if (item.id == id) {
            return true;
          }
        })
        newObj.value.splice(index, 1);
        toSearchUser();
      }

      //搜索功能
      function toSearchUser() {
        const condition = keyWords.value;
        searchUser.value = newObj.value.filter(function (item) {
          const flag = item.name.indexOf(condition) != -1;
          return flag
        })
      }

      //重置搜索条件，重新搜索
      function reSetSearchUser() {
        keyWords.value = '';
        toSearchUser();
      }
      //修改用户
      function update(id) {
        let obj = newObj.value.filter(function (item) {
          const flag = item.id == id;
          return flag;
        })
        if (obj.length == 1) {
          obj = obj[0];
          Obj.value.id = obj.id;
          Obj.value.number = obj.number;
          Obj.value.day = obj.day;
          Obj.value.name = obj.name;
          Obj.value.age = obj.age;
          Obj.value.case = obj.case;
          Obj.value.department = obj.department;
          Obj.value.Dname = obj.Dname;
          Obj.value.date = obj.date;
          Obj.value.adders = obj.adders;
          addUser();
        }
      }


      return { isShow,keyWords, addUser,searchUser,toSearchUser,reSetSearchUser,closeWindow, update,Obj, newObj, delNew, saveNew, maxId, }
    },
    mounted() { //页面加载后初始化工作
      //1、页面加载后自动搜索
      this.searchUser = this.newObj;
      //2、初始化id值,this.maxId
      for (let index = 0; index < this.newObj.length; index++) {
        const element = this.newObj[index];
        if (this.maxId < element.id) {
          this.maxId = element.id + 1
        }
      }
      console.log('maxId = ' + this.maxId)
    },
    computed: {
      totals() {
        return this.searchUser.length;
      }
    },
    
  })
  const vm = app.mount("#app");

</script>

</html>